<template>

  <div id="login">
    <ul class="my-list-ul">
      <li><img src="../../assets/logo.png" class="my-center"/></li>
      <li>
        <el-input id="userName" v-model="userName" placeholder="用户名"/>
      </li>
      <li>
        <el-input id="password" v-model="password" placeholder="密码"/>
      </li>
      <li>
        <el-button id="toLogin" type="primary" class="my-center" style="width: 100%;" @click="toLogin" round>登 录</el-button>
      </li>
    </ul>


  </div>

</template>

<script>
  export default {
    name: "login",
    data() {
      return {
        userName: '',// user name
        password: '' // user password
      }
    },
    methods: {
      toLogin() {
        this.toLogin.loading = true;
        console.log('userName=' + this.userName + ", password=" + this.password);
        if (this.userName == 'root' && this.password == '123456') {
          localStorage.setItem("userInfo", true);
          this.$router.push("/home");
        } else if (this.userName.length < 1) {
          this.$message({message: '用户名不能为空', type: 'error'});
        } else if (this.password.length < 1) {
          this.$message({message: '密码不能为空', type: 'error'});
        } else {
          this.$message({message: '用户名或者密码错误', type: 'error'});
        }
        this.toLogin.loading = false;
      }
    }
  }
</script>

<style scoped>

  .my-list-ul {
    width: 400px;
    margin: 0 auto;
  }

  .my-list-ul li {
    list-style-type: none;
    margin-top: 10px;
    padding: 0 auto;
  }
  .my-center{
    display: block;
    margin: 0 auto;
  }

</style>
